<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <swiper class="content">
      <swiper-item class="swiperContent" :class="'swiper' + index" v-for="(item, index) in arr" :key="index">
        <div class="item">{{item}}</div>
      </swiper-item>
    </swiper>
  </div>
</template>

<script>
/* eslint-disable */
import Swiper from './components/swiper.vue'
import SwiperItem from './components/swiper-item.vue'
export default {
  name: 'app',
  components: {
    Swiper,
    SwiperItem
  },
  data () {
    return {
      arr:[]
    }
  },
  created () {
    setTimeout(() =>{
      this.arr = [1,2,3]
    },100)
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.content {
  width: 100%;
  height: 200px;
  /* background: red; */
}

.swiperContent {
  /* position: relative; */
  /* display: inline-block; */
  height: 200px;
  color: #fff;
  /* width: 25%; */
}

.item {
  /* font-size: 16px; */
  color: #fff;
  height: 300px;
  width: 100%;
}

.swiper0 {
  background: red;
}
.swiper1 {
  background: yellow;
}
.swiper2 {
  background: green;
}
.swiper3 {
  background: blue;
}
</style>
